<script setup lang="ts">
import { computed } from 'vue';
import { useAuthStore } from './stores/auth';
import PhotoGallery from './components/PhotoGallery.vue';
import LoginPage from './components/LoginPage.vue';

const authStore = useAuthStore();
const isAuthenticated = computed(() => authStore.isAuthenticated);
</script>

<template>
  <main>
    <LoginPage v-if="!isAuthenticated" />
    <PhotoGallery v-else />
  </main>
</template>

<style>
body {
  background-color: #000;
  color: #fff;
  min-height: 100vh;
}

#app {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

main {
  padding: 0;
}
</style>